<script setup>
import { ref } from "vue";
import textIcon from "@/assets/img/warranty/text-icon1.png";
let isCollapse = ref(true);
let activeKey = ref(0);
const list = [
    {
        id: 0,
        title: "WHAT YOU MUST DO TO OBTAIN SERVICE",
        bgColor: "#989898",
        texts: ["You must contact the Program Administrator by calling (888-547-1118) for tire replacement or tire repair. Prior authorization must be obtained from the Program Administrator to replace a tire damaged by a road hazard. YOU MUST PRESENT THE ORIGINAL INVOICE SHOWING THE PURCHASE OF THE TIRE(S). The damaged tire must be made available for inspection by the repair facility and/or the Program Administrator. All claims and any required documentation must be submitted to the Program Administrator within sixty (60) days of the date pf failure/or service. This plan does not have a deductible."],
    },
    {
        id: 1,
        title: "WHAT IS COVERED BY THIS PLAN",
        bgColor: "#989898",
        content: [
            {
                title: "Coverage Period",
                texts: ["Valid for twelve (12) months from the purchase date of your eligible tire(s), as stated on the original purchase receipt.", "Or within the first 3/32nds of an inch of treadwear, whichever occurs first."],
            },
            {
                title: "Tire Replacement",
                texts: ["If an eligible tire becomes unserviceable due to a road hazard and cannot be safely repaired per the manufacturer’s guidelines during the Coverage Period, it will be replaced with a new tire.", "If available, an exact make and model replacement tire will be installed.", "If not available, the plan will cover up to 100% of the retail price paid (as stated on the original sales invoice) for a comparable quality tire.", "You will be responsible for taxes, mounting, balancing, and other miscellaneous fees.", "The plan does not transfer to the replacement tire.", "If the replacement tire is not the exact make and model of the original, confirm with the dealer if the replacement tire has road hazard coverage."],
            },
            {
                title: "Tire Repair",
                texts: ["If your tire is damaged by a road hazard and can be safely repaired, it will be repaired per manufacturer’s guidelines at any participating facility.", "The plan will cover up to $30.00 for the repair.", "The plan will remain in effect."],
            },
        ],
    },
    {
        id: 2,
        title: "EXCLUSIONS AND LIMITATIONS",
        bgColor: "#989898",
        content: [
            {
                title: "Ineligible Vehicles",
                texts: ["Vehicles with a manufacturer's load rating capacity of greater than one (1) ton.", "Vehicles used for farm or agricultural purposes.", "Emergency service vehicles, vehicles used for hire (e.g., Lyft, Uber), towing, construction, postal service, off-road service, or commercial purposes."],
            },
            {
                title: "Excluded Damages",
                texts: ["Damage from off-road use, collision, fire, vandalism, theft, snow chains, manufacturer's defects, abuse and neglect (e.g., improper application, inflation, overloading, brake lock-up, wheel spinning).", "Cosmetic damage, sidewall abrasions, or other appearance items that do not affect safety or performance.", "Tires with torn beads.", "Damages or irregular wear caused by misalignment, mechanical failures, or interference with vehicle components.", "Tires repaired in a manner other than per manufacturer’s guidelines."],
            },
            {
                title: "General Exclusions",
                texts: ["Plan covers only eligible tires installed on the vehicle registered to the customer and listed on the original purchase receipt.", "Consequential and incidental damages are excluded.", "Some states do not allow the exclusion or limitation of consequential and incidental damages; such limitations may not apply to you.", "No expressed guarantees other than those stated herein.", "This plan gives you specific legal rights; you may have other rights, which vary from state to state."],
            },
        ],
    },
    {
        id: 3,
        title: "LIMITATION OF LIABILITY",
        bgColor: "#989898",
        texts: ["This road hazard plan sets out the full extent of our responsibilities and the exclusive remedy regarding new tires purchased.", "Neither the Obligor nor the Program Administrator shall be liable for special, indirect, incidental, punitive, or consequential damages (e.g., loss of business profits, business interruption, expenses from third-party claims, loss of use of the vehicle, inconvenience).", "Neither the Obligor nor the Program Administrator authorizes any person, entity, or tire dealer to create any other obligation or liability in connection with this product."],
    },
    {
        id: 4,
        title: "TRANSFERABILITY",
        bgColor: "#989898",
        texts: ["This plan is non-transferable."],
    },
    {
        id: 5,
        title: "DISPUTE RESOLUTION/ARBITRATION AGREEMENT and CLASS ACTION WAIVER",
        bgColor: "#989898",
        content: [
            {
                title: "Arbitration",
                texts: ["Any and all claims related to this plan shall be resolved by binding arbitration on an individual basis.", "Includes claims arising under contract, tort, statute, regulation, rule, or other laws, and against any of the Administrator’s or Obligor’s affiliates, subsidiaries, etc.", "Does not include statutory claims for public injunctive relief under California law, if applicable."],
            },
            {
                title: "Class Action Waiver",
                texts: ["All claims must be brought solely in an individual capacity.", "No claims will be arbitrated on a class action basis.", "The arbitrator cannot consolidate claims or conduct a class action.", "If this Class Action Waiver is ruled unenforceable, arbitration will be null and void, and claims shall proceed in court."],
            },
            {
                title: "Governing Law",
                texts: ["Federal substantive law and the Federal Arbitration Act (9 U.S.C. §§ 1-16) apply.", "If state law applies, it will be the law of the state where you purchased the plan."],
            },
            {
                title: "Small Claims Court",
                texts: ["Parties retain the right to seek remedies in small claims court on an individual basis."],
            },
        ],
    },
];
const setActiveKey = (key) => {
    if (activeKey.value == key && isCollapse.value) {
        isCollapse.value = false;
    } else {
        isCollapse.value = true;
        activeKey.value = key;
    }
};
if (translate) {
    translate.execute();
}
</script>
<template>
    <div class="container px-0" style="margin-top: -2rem">
        <img class="img-fluid" :src="textIcon" alt="" />
    </div>
    <div class="container top pt-4">
        <div class="row">
            <div class="col-lg-7 mb-2">
                <div class="mb-3">
                    <div class="text-f-Montserrat-Regular text-red" style="font-size: 1.12rem">PROGRAM ADMINISTRATOR</div>
                    <div class="line my-1"></div>
                    <div class="text-f-Montserrat-Regular text-black">AUTOMOTIVE BUSINESS SOLUTIONS</div>
                </div>
                <div class="mb-3">
                    <div class="text-f-Montserrat-Regular text-red" style="font-size: 1.12rem">PROGRAM ADMINISTRATIVE OFFICE</div>
                    <div class="line my-1"></div>
                    <div class="text-f-Montserrat-Regular text-black">10170 CHURCH RANCH WAY, SUITE 320, WESTMINSTER, CO 80021 <br />(P.O. BOX 33535, DENVER, CO 80233)</div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="mb-3">
                    <div class="text-f-Montserrat-Regular text-red" style="font-size: 1.12rem">PROGRAM CONTACT NUMBER</div>
                    <div class="line my-1"></div>
                    <div class="text-f-Montserrat-Regular text-black">(888) 547-1118</div>
                </div>
                <div class="mb-3">
                    <div class="text-f-Montserrat-Regular text-red" style="font-size: 1.12rem">PROGRAM WEBSITE</div>
                    <div class="line my-1"></div>
                    <div class="text-f-Montserrat-Regular text-black show-pointer">
                        <a href="https://www.tireprotection.net/unicorn" class="text-black" target="_blank"> WWW.TIREPROTECTION.NET/UNICORN </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container container-box py-4 mt-4" style="user-select: none">
        <div v-for="(item, index) in list" :key="index">
            <div class="d-flex align-items-center mt-4">
                <svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <polygon points="0,0 0,20 15,10" :fill="activeKey == index && isCollapse ? '#ed1c24' : '#00000000'" fill-rule="evenodd" />
                </svg>
                <div class="box-item text-center text-f-ERASBD show-pointer px-1 fs-3 uppercase" :style="`background:${activeKey == index && isCollapse ? '#ed1c24' : item.bgColor}`" @click="setActiveKey(index)">
                    {{ item.title }}
                </div>
                <svg width="30" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <polygon points="30,0 30,20 15,10" :fill="activeKey == index && isCollapse ? '#ed1c24' : '#00000000'" fill-rule="evenodd" />
                </svg>
            </div>
            <div class="content" v-if="activeKey == index && isCollapse">
                <div v-if="item.content">
                    <div v-for="(child, index) in item.content" :key="index">
                        <div class="text-red text-center text-f-Montserrat-Bold mb-2" style="font-size: 1.2rem">
                            {{ child.title }}
                        </div>
                        <div v-if="child.texts">
                            <div v-for="(text, index) in child.texts" :key="index" class="text-f-Montserrat-Medium d-flex">
                                <div>
                                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8" cy="8" r="4" stroke="#ED1C24" stroke-width="2" fill="none" />
                                    </svg>
                                </div>
                                <span class="mx-2 text-black">{{ text }}</span>
                            </div>
                        </div>
                        <div class="divider my-4" v-if="item.content.length != index + 1"></div>
                    </div>
                </div>
                <div v-else>
                    <div v-for="(text, index) in item.texts" :key="index" class="text-f-Montserrat-Medium d-flex">
                        <div class="text-red" style="font-size: 2rem; margin-top: -1rem; height: 20px">•</div>
                        <div class="mx-2 text-black">{{ text }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.top {
    background: #efefef;
    border-radius: 1rem;
}
.line {
    width: 5.5rem;
    height: 0.21rem;
    background: #181818;
}
.triangle {
    color: red;
    font-size: 1.3rem;
}
.triangle.left {
    transform: rotate(-90deg);
}
.triangle.right {
    transform: rotate(90deg);
}
.box-item {
    width: calc(100% - 60px);
    height: 4.2rem;
    line-height: 1.8rem;
    vertical-align: middle;
    border-radius: 2.1rem;
    color: #fff;
    display: grid; /* 使用 CSS Grid */
    place-items: center; /* 水平垂直居中 */
}

.content {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem 2rem;
    width: calc(100% - 60px);
    margin-left: 30px;
}
.divider {
    border-bottom: 2px #181818 solid;
}
@media (max-width: 991.98px) {
    .box-item {
        font-size: 1rem !important;
        line-height: 1.1rem !important;
        height: 4.2rem;
        border-radius: 1rem;
        padding: 0 1rem;
    }
    .container.container-box {
        padding: 0 !important;
    }
    .content {
        padding: 0.5rem 0.5rem;
    }
}
</style>
